<template>
  <div class="container">
    <div class="row row-centered">
      <div class="well col-md-4 col-centered mt-5">
        <div class="nav">
          <div @click="login" :class="current == 'login' ? 'active' : ''">
            登录
          </div>
          <div @click="register" :class="current == 'register' ? 'active' : ''">
            注册
          </div>
        </div>
        <!--登录区域-->
        <form @submit.prevent="onSubmit" role="form" v-if="current == 'login'">
          <div class="input-group input-group-lg">
            <span class="input-group-addon" id="sizing-addon1">
              <i class="glyphicon glyphicon-user" aria-hidden="true"></i>
            </span>
            <input
              type="text"
              class="form-control "
              id="user_name"
              v-model="user_name"
              name="user_name"
              placeholder="请输入用户名"
              required
            />
          </div>
          <div class="input-group input-group-lg mt-3">
            <span class="input-group-addon" id="sizing-addon1">
              <i class="glyphicon glyphicon-lock"></i>
            </span>
            <input
              type="password"
              class="form-control"
              id="user_pass"
              v-model="user_pass"
              name="user_pass"
              placeholder="请输入密码"
              required
            />
          </div>
          <br />
          <button class="btn btn-success btn-block btn-lg" @click="loginbtn">
            登录
          </button>
        </form>
        <!--注册区域-->
        <form method="post" role="form" @submit.prevent="registerbtn" v-else>
          <div class="input-group input-group-lg">
            <span class="input-group-addon" id="sizing-addon1">
              <i class="glyphicon glyphicon-user" aria-hidden="true"></i>
            </span>
            <input
              type="text"
              class="form-control"
              id="user_name"
              v-model="user_name"
              name="user_name"
              placeholder="请输入用户名"
              required
            />
          </div>
          <div class="input-group input-group-lg mt-3">
            <span class="input-group-addon" id="sizing-addon1">
              <i class="glyphicon glyphicon-lock"></i>
            </span>
            <input
              type="password"
              class="form-control"
              v-model="user_pass"
              id="user_pass"
              name="user_pass"
              placeholder="请输入密码"
              required
            />
          </div>
          <div class="input-group input-group-lg mt-3">
            <span class="input-group-addon" id="sizing-addon1">
              <i class="glyphicon glyphicon-user" aria-hidden="true"></i>
            </span>
            <input
              type="email"
              class="form-control"
              v-model="email"
              id="email"
              name="email"
              placeholder="请输入邮箱"
              required
            />
          </div>
          <br />
          <button type="submit" class="btn btn-success btn-block btn-lg">
            注册
          </button>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      current: "login",
      user_name: "",
      user_pass: "",
      email: "",
    };
  },

  methods: {
    login() {
      this.current = "login";
      this.reset();
    },
    register() {
      this.current = "register";
      this.reset();
    },
    onSubmit() {
      return false;
    },
    // 清空表单
    reset() {
      this.user_name = "";
      this.user_pass = "";
      this.email = "";
    },
    // 登录按钮
    loginbtn() {
      this.$http2({
        url: "/login",
        method: "POST",
        data: { user_name: this.user_name, user_pass: this.user_pass },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$store.commit("setLoginMsg", {
            token: res.data.token,
            userMsg: res.data.userMsg,
          });
          const toast = Toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            icon: "success",
            message: "登陆成功,3 秒后跳转",
          });

          let second = 3;
          const timer = setInterval(() => {
            second--;
            if (second) {
              toast.message = `登陆成功,${second} 秒后跳转`;
            } else {
              clearInterval(timer);
              // 手动清除 Toast
              Toast.clear();
              this.$router.push("/");
            }
          }, 1000);
        } else {
          Toast.fail("用户名或密码错误，请重新输入");
          this.reset();
        }
      });
    },
    // 注册按钮
    registerbtn() {
      this.$http2({
        url: "/register",
        method: "POST",
        data: {
          user_name: this.user_name,
          user_pass: this.user_pass,
          email: this.email,
        },
      }).then((res) => {
        if (res.data.result == "success") {
          Toast.success(res.data.msg);
          const toast = Toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            icon: "success",
            message: "恭喜您注册成功，3 秒后跳转至登录页面",
          });
          let second = 3;
          const timer = setInterval(() => {
            second--;
            if (second) {
              toast.message = `恭喜您注册成功，${second} 秒后跳转至登录页面 `;
            } else {
              clearInterval(timer);
              // 手动清除 Toast
              Toast.clear();
              this.login();
            }
          }, 1000);
        } else {
          Toast.fail(res.data.msg);
          this.reset();
        }
      });
    },
  },
};
</script>
<style scoped>
.container {
  display: table;
  height: 100%;
}

.row {
  display: table-cell;
  vertical-align: middle;
}
/* centered columns styles */
.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none;
  text-align: left;
  margin-right: -4px;
}
.well {
  background: #fff;
  padding: 10px 10px 20px 10px;
}
.nav {
  display: flex;
  flex: row;
  padding: 0 40px 10px;
  font-size: 20px;
  font-weight: 700;
}
.nav div {
  width: 50%;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.nav div.active {
  border-bottom: 2px solid #80bd01;
}
</style>
